<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view>
    <view>
      <view class="card_top">
        <view class="search_card flex justify-between">
          <view class="search">
            <uv-search
              searchIconSize="30"
              shape="square"
              height="70rpx"
              :placeholder="currentLanguageTexts.Pleaseentenumber"
              :showAction="false"
              v-model="keyword"
            >
            </uv-search>
          </view>
          <view class="search_btn" @click="getlist()">
            {{ currentLanguageTexts.Orderinquiry }}
          </view>
        </view>
        <view class="tabs">
          <uv-tabs
            :list="tabListType"
            :current="current2"
            @change="change2"
            keyName="name"
            lineColor="#e45656"
            :scrollable="false"
          ></uv-tabs>
          <uv-tabs
            v-if="orderType != 'due'"
            @click="tabclick"
            :current="current"
            :scrollable="scrollableOf"
            lineHeight="6rpx"
            lineWidth="60rpx"
            :list="tabList"
            :activeStyle="{
              color: '#303133',
              fontWeight: '600',
              fontSize: '34rpx',
            }"
          >
          </uv-tabs>
          <uv-tabs
            v-if="orderType == 'due'"
            @click="tabclick"
            :current="current3"
            :scrollable="scrollableOf"
            lineHeight="6rpx"
            lineWidth="60rpx"
            :list="tabList2"
            :activeStyle="{
              color: '#303133',
              fontWeight: '600',
              fontSize: '34rpx',
            }"
          >
          </uv-tabs>
        </view>
      </view>
    </view>

    <view class="" v-if="list.length == 0">
      <uv-empty :text="currentLanguageTexts.noData"></uv-empty>
    </view>
    <view class="pad" v-else>
      <view class="card_item" v-for="(item, i) in list" :key="i">
        <view class="title flex content-center justify-between">
          <view class="left flex content-center">
            <view class="left_num">
              <span
                v-if="item.orderType == 'desk' || item.orderType == 'due'"
                >{{ item.deskNumber }}</span
              >
              <span v-else>{{ item.numberId }}</span>
            </view>
            <view class="left_text" v-if="item.orderType == 'takein'">{{
              currentLanguageTexts.takein
            }}</view>
            <view class="left_text" v-if="item.orderType == 'takeout'">{{
              currentLanguageTexts.takeout
            }}</view>
            <view class="left_text" v-if="item.orderType == 'desk'">{{
              currentLanguageTexts.desk
            }}</view>
            <view class="left_text" v-if="item.orderType == 'due'">{{
              currentLanguageTexts.due
            }}</view>
          </view>
          <view class="right">
            <text>{{ item.statusDto.title }} </text>
          </view>
        </view>

        <view class="content">
          <view class="content_head flex justify-between">
            <view class="left flex content-center">
              <image
                :src="
                  item.appUserInfoRespVO
                    ? item.appUserInfoRespVO.avatar
                      ? item.appUserInfoRespVO.avatar
                      : '/static/images/mine/default.png'
                    : '/static/images/mine/default.png'
                "
                mode="aspectFill"
              ></image>
              <view class="gray">
                {{
                  item.appUserInfoRespVO
                    ? item.appUserInfoRespVO.nickname
                    : currentLanguageTexts.focuslife
                }}
              </view>
            </view>
            <view
              class="iconfont-yshop icon-mobile"
              @click="makePhoneCall(item.appUserInfoRespVO?.mobile)"
              style="font-size: 45rpx; margin-right: 40rpx"
            ></view>
          </view>
          <view class="content_item">
            <text class="gray">{{ currentLanguageTexts.orderTime }}：</text
            >{{ formatDateTime(item.createTime) }}
          </view>
          <view class="content_item">
            <text class="gray">{{ currentLanguageTexts.orderNo }}：</text
            >{{ item.orderId }}
          </view>

          <view class="content_item flex justify-between content-center">
            <view class="">
              <text class="gray">{{ currentLanguageTexts.orderAmount }}：</text
              ><text class="black">$ &nbsp;{{ item.payPrice }}</text>
            </view>
            <view
              class=""
              style="padding-top: 16rpx; box-sizing: border-box"
              @click="
                gopage(
                  '/pages/components/pages/merchant/orderDetail?id=' + item.id
                )
              "
            >
              <uv-icon name="arrow-right" size="28rpx"></uv-icon>
            </view>
          </view>
          <view class="content_item" v-if="item.refundStatus > 0">
            <text class="gray">{{ currentLanguageTexts.ReasonRefund }}：</text
            ><text class="orange">{{ item.refundReasonWap }}</text>
          </view>

          <view
            class="shops"
            style="max-height: 320}"
            v-if="item.orderType != 'due'"
          >
            <view class="gray"> {{ currentLanguageTexts.Inventory }}: </view>
            <view
              class="shop flex content-center"
              v-for="(cart, k) in item.cartInfo"
              :key="k"
            >
              <image :src="cart.image" mode="aspectFill"></image>
              <view class="shop_item">
                <view class="flex justify-between one">
                  <view class="">{{ cart.title }}</view>
                  <view class="">$&nbsp;{{ cart.price }}</view>
                </view>
                <view class="two">
                  {{ cart.spec }}
                </view>
                <view class="three"> ×{{ cart.number }} </view>
              </view>
            </view>
          </view>
          <view class="shops" style="max-height: 320}" v-else>
            <view class="gray">
              {{ currentLanguageTexts.reservationinformation }}:
            </view>
            <view class="shop flex content-center">
              <image :src="item.appShopDeskVO.image" mode="aspectFill"></image>
              <view class="shop_item">
                <view class="flex justify-between one">
                  <view class="">{{ item.appShopDeskVO.title }}</view>
                  <view class="">$ &nbsp;0.00</view>
                </view>
                <view class="two">
                  {{ currentLanguageTexts.tableNumber }}:{{
                    item.appShopDeskVO.number
                  }}
                </view>
                <view class="three"> ×1 </view>
              </view>
            </view>
          </view>
          <view class="content_Bom" v-if="item.dueStatus == 1">
            <view class="jdbtn" @click="cancelDueOrder(item.id)">
              {{ currentLanguageTexts.cancelDue }}
            </view>
          </view>
          <view class="content_Bom" v-if="item.statusDto.type == 1">
            <view class="jdbtn" @click="doSend(item.id)">
              {{ currentLanguageTexts.issue }}
            </view>
          </view>
          <view class="content_Bom" v-if="item.statusDto.type == 2">
            <view class="jdbtn" @click="doTake(item.id)">
              {{ currentLanguageTexts.Backendreceiving }}
            </view>
          </view>
          <view class="content_Bom">
            <view
              class="jdbtn"
              @click="refund(item.id)"
              v-if="item.statusDto.type == -1"
            >
              {{ currentLanguageTexts.Agreerefund }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-tabbar
      :value="value"
      @change="(index) => (value = index)"
      activeColor="#09b4f1"
    >
      <uv-tabbar-item
        :text="currentLanguageTexts.homePage"
        icon="home"
        @click="gopage('/pages/components/pages/merchant/index')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.menuOrder"
        icon="order"
        @click="gopage('/pages/components/pages/merchant/order')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.Desk"
        icon="bell"
        @click="gopage('/pages/components/pages/merchant/bell')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.mine"
        icon="account"
        @click="gopage('/pages/components/pages/merchant/my')"
      ></uv-tabbar-item>
      <uv-tabbar-item
        :text="currentLanguageTexts.return"
        icon="arrow-leftward"
        @click="gopage2('/pages/index/index')"
      ></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { orderList, orderSend, orderTake, orderRefund } from '@/api/merchant';
import { cancelDue } from '@/api/order';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { formatDateTime } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.orderlist);
const value = ref(1);
const page = ref(1);
const pageSize = ref(10);
const keyword = ref('');
const orderType = ref('takein');
const scrollableOf = ref(true);
const tabListType = ref([
  {
    type: 'takein',
    name: currentLanguageTexts.value.takein,
  },
  {
    type: 'takeout',
    name: currentLanguageTexts.value.takeout,
  },
  {
    type: 'desk',
    name: currentLanguageTexts.value.desk,
  },
  {
    type: 'due',
    name: currentLanguageTexts.value.due,
  },
]);
const tabList = ref([
  {
    type: -1,
    name: currentLanguageTexts.value.all,
  },
  {
    type: 0,
    name: currentLanguageTexts.value.Pendingorders,
  },
  {
    type: 1,
    name: currentLanguageTexts.value.Pendinggoods,
  },
  {
    type: 2,
    name: currentLanguageTexts.value.fourthStatusCompleted,
  },
  {
    type: 3,
    name: currentLanguageTexts.value.Pendingrefund,
  },
  {
    type: 4,
    name: currentLanguageTexts.value.Pendingpayment,
  },
  {
    type: 5,
    name: currentLanguageTexts.value.Refunded,
  },
]);
const tabList2 = ref([
  {
    type: 1,
    name: currentLanguageTexts.value.appointmentProgress,
  },
  {
    type: 2,
    name: currentLanguageTexts.value.fourthStatusCancel,
  },
  {
    type: 3,
    name: currentLanguageTexts.value.fourthStatusCompleted,
  },
]);
const current = ref(0);
const current2 = ref(0);
const current3 = ref(0);
const list = ref([]);
const type = ref(-1);
onLoad((e) => {
  if (e.index) {
    if (e.index == 7) {
      //current.value = 0
      type.value = 1;
      current2.value = 3;
      orderType.value = 'due';
      scrollableOf.value = false;
    } else {
      current.value = e.index;
      type.value = e.index - 1;
    }
  }
  list.value = [];
  getlist();
});

onReachBottom(() => {
  page.value++;
  getlist(true);
});

const makePhoneCall = (mobile) => {
  // if(!mobile){
  // 	uni.showToast({
  // 		title: '！',
  // 		icon: 'error'
  // 	})
  // }
  uni.makePhoneCall({
    phoneNumber: mobile,
    fail(res) {},
  });
};

const cancelDueOrder = async (id) => {
  let data = await cancelDue({ id: id });
  if (data) {
    getlist();
  }
};

//出单
const doSend = async (id) => {
  let res = await orderSend({ id: id });
  if (res) {
    getlist();
  }
};

//收货
const doTake = async (id) => {
  let res = await orderTake({ id: id });
  if (res) {
    getlist();
  }
};

//退款
const refund = (id) => {
  uni.showModal({
    title: currentLanguageTexts.value.tip,
    content: currentLanguageTexts.value.Confirmtorefund,
    confirmText: currentLanguageTexts.value.confirm,
    cancelText: currentLanguageTexts.value.cancel,
    success: async function (res) {
      if (res.confirm) {
        let res1 = await orderRefund({ id: id });
        if (res1) {
          getlist();
        }
      } else if (res.cancel) {
      }
    },
  });
};

const tabclick = (e) => {
  page.value = 1;
  type.value = e.type;
  keyword.value = '';
  list.value = [];
  getlist();
};

const change2 = (e) => {
  orderType.value = e.type;
  if (e.type == 'due') {
    scrollableOf.value = false;
    //tabList.value = tabList2.value
    type.value = 1;
  } else {
    type.value = -1;
    scrollableOf.value = true;
  }
  getlist();
};
const gopage = (url) => {
  uni.navigateTo({
    url,
  });
};

const gopage2 = (url) => {
  uni.switchTab({
    url,
  });
};

const getlist = async (isRefresh = false) => {
  let ordersData = await orderList({
    shopId: merchartShop.value.id,
    page: page.value,
    limit: pageSize.value,
    type: type.value,
    key: keyword.value,
    orderType: orderType.value,
  });
  console.log(ordersData);
  if (ordersData) {
    if (isRefresh) {
      if (ordersData.length == 0) {
        uni.showToast({
          title: '已经到底啦',
          duration: 2000,
        });
        return;
      }
      list.value = list.value.concat(ordersData);
      page.value += 1;
    } else {
      list.value = ordersData;
    }
  }
};
</script>

<style lang="scss">
.card_top {
  // height: 200rpx;
  background-color: #fff;
  padding: 10rpx 35rpx 10rpx;
  box-sizing: border-box;

  .search_card {
    margin-bottom: 10rpx;

    .search {
      width: 440rpx;
    }

    .search_btn {
      width: 209rpx;
      height: 70rpx;
      background: #09b4f1;
      border-radius: 10rpx;
      text-align: center;
      line-height: 70rpx;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
}

.pad {
  margin-top: 3vh;
  padding: 0rpx 26rpx;
  box-sizing: border-box;

  .card_item {
    width: 700rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 20rpx 0;

    .title {
      border-bottom: 1rpx solid #ebebeb;
      padding: 14rpx 24rpx;
      box-sizing: border-box;

      .left {
        .left_num {
          padding: 2rpx 10rpx;
          box-sizing: border-box;
          background: #09b4f1;
          border-radius: 10rpx;
          font-size: 35rpx;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          line-height: 64rpx;
          margin-right: 20rpx;
        }

        .left_text {
          font-size: 30rpx;
          font-weight: 600;
          color: #333333;
          text-align: center;
          line-height: 64rpx;
        }
      }

      .right {
        font-size: 32rpx;
        color: #ff9c2e;
        line-height: 64rpx;
      }
    }

    .content {
      padding: 24rpx;
      box-sizing: border-box;

      .content_Bom {
        margin: 20rpx 0 0;

        .jdbtn {
          margin: 46rpx auto 0;
          width: 572rpx;
          height: 76rpx;
          background: #09b4f1;
          border-radius: 10rpx;
          text-align: center;
          line-height: 76rpx;
          font-size: 34rpx;
          color: #ffffff;
        }
      }

      .content_item {
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        margin: 20rpx 0;
      }

      .orange {
        font-size: 30rpx;
        color: #ff9c2e;
      }

      .gray {
        font-size: 30rpx;
        color: #777777;
      }

      .black {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
      }

      .content_head {
        .left {
          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
          line-height: 60rpx;
        }
      }

      .shops {
        overflow: hidden;

        .shop {
          margin: 20rpx 0;

          image {
            width: 122rpx;
            height: 120rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
          }

          .shop_item {
            width: 500rpx;

            .one {
              font-size: 30rpx;
              color: #333333;
            }

            .two {
              font-size: 24rpx;
              color: #777777;
              margin: 6rpx 0;
            }

            .three {
              font-size: 24rpx;
              color: #777777;
            }
          }
        }
      }
    }
  }
}
</style>
